<template>
  <div class='container'>

    <div class='div'>
      <el-input v-model='key' type='text' placeholder='查找' @input='search' clearable />
      <br />
      <br />
      <el-checkbox-group v-model='select'>
        <el-checkbox v-for='item in resultData' :key='item.value' :label='item.label'
                     :checked='item.checked'></el-checkbox>

      </el-checkbox-group>

      <br />
      查询的结果：
      <br />
      {{ select.join(',') }}
    </div>


  </div>
</template>

<script>
export default {
  name: 'checkbox-filter',
  data() {
    return {
      select: [],
      key: undefined,
      data: [
        { label: 'A100', value: 1, checked: true },
        { label: 'A101', value: 2, checked: false },
        { label: 'A110', value: 3, checked: false },
        { label: 'A150', value: 4, checked: false },
        { label: 'A160', value: 5, checked: false },
        { label: 'B100', value: 6, checked: false },
        { label: 'B101', value: 7, checked: false },
        { label: 'B150', value: 8, checked: false }
      ],
      resultData: []
    }
  },
  created() {
    this.resultData = this.data
  },
  methods: {
    search() {
      console.log('search')
      if (this.key) {
        this.resultData = this.data.filter(item => item.label.includes(this.key.trim()))
      } else {
        this.resultData = this.data
      }
    }
  }
}
</script>

<style scoped>

.container {
  display: flex;
  justify-content: space-around;
}

.div {
  width: 350px;
  height: 300px;
  border: 1px solid black;
  padding: 20px;
}


.el-button {
  margin-top: 30px;
}
</style>